import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { PriceChart } from "@/components/market/chart";
import { EventRow } from "@/components/market/event-row";
import { InstrumentHeader } from "@/components/market/instrument-header";
import { InstrumentStats } from "@/components/market/instrument-stats";
import { CoverageBadge } from "@/components/market/coverage-badge";
import { ProvenancePanel } from "@/components/market/provenance-panel";
import { RightsBadge, StatusBadge } from "@/components/ui/status-badge";
import { Empty, Kv, Section } from "@/components/ui/section";
import { api, apiOptional } from "@/lib/api";
import { ASSET_CLASS_LABEL, formatDateTime, instrumentHref } from "@/lib/format";
import type { Exchange, Filing, Instrument, InstrumentCoverage, MarketEvent, Quote } from "@/lib/types";

export const dynamic = "force-dynamic";

interface Detail {
  instrument: Instrument;
  company: { id: string; name: string; cik: string | null; country: string | null; sector: string | null; industry: string | null; website: string | null } | null;
  exchange: (Exchange & { status: NonNullable<Exchange["status"]> }) | null;
  quote: Quote | null;
  aliases: Array<{ alias: string; source_id: string | null }>;
  sources: string[];
  related: Instrument[];
}

async function load(id: string) {
  return api<Detail>(`/v1/instruments/${encodeURIComponent(id)}`);
}

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  try {
    const d = await load(id);
    const i = d.instrument;
    const title = `${i.symbol} · ${i.name}`;
    const desc = `${i.name} (${i.symbol}) — ${ASSET_CLASS_LABEL[i.asset_class] ?? i.asset_class}${d.exchange ? ` on ${d.exchange.name}` : ""}. Canonical price, sources, confidence, history and events on Market Atlas.`;
    return { title, description: desc, alternates: { canonical: instrumentHref(i.id) }, openGraph: { title, description: desc, type: "website" } };
  } catch {
    return { title: "Instrument" };
  }
}

export default async function InstrumentPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const d = await load(id);
  if (!d?.instrument) notFound();
  const i = d.instrument;
  const [events, filings, coverage] = await Promise.all([
    apiOptional<MarketEvent[]>(`/v1/events?instrument=${encodeURIComponent(i.id)}&limit=25`),
    d.company?.cik ? apiOptional<Filing[]>(`/v1/filings?cik=${encodeURIComponent(d.company.cik)}&limit=15`) : Promise.resolve(null),
    apiOptional<InstrumentCoverage>(`/v1/coverage/${encodeURIComponent(i.id)}`),
  ]);
  const isRate = i.asset_class === "TREASURY" || i.asset_class === "INTEREST_RATE" || i.asset_class === "BOND";
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "FinancialProduct",
    name: i.name,
    tickerSymbol: i.symbol,
    category: ASSET_CLASS_LABEL[i.asset_class] ?? i.asset_class,
    url: `${process.env.NEXT_PUBLIC_SITE_URL ?? "https://www.market-atlas.co"}${instrumentHref(i.id)}`,
    ...(d.exchange ? { provider: { "@type": "Organization", name: d.exchange.name } } : {}),
  };
  return (
    <div>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <InstrumentHeader instrument={i} quote={d.quote} exchange={d.exchange} coverage={coverage ?? undefined} />
      <div className="mx-auto max-w-[1440px] px-3 py-5 sm:px-5">
        <div className="grid grid-cols-1 [&>*]:min-w-0 gap-6 lg:grid-cols-[1fr_360px]">
          <div className="min-w-0">
            <PriceChart instrumentId={i.id} assetClass={i.asset_class} defaultRange={i.asset_class === "CRYPTO" ? "1D" : "3M"} />
            <Section title="Key statistics" hint={isRate ? "percent" : d.quote?.currency ?? undefined}>
              <InstrumentStats instrument={i} quote={d.quote} />
            </Section>
            <Section title="Why this price?" hint="source coverage matrix · every observation, its type, its role and its distance to the consensus" badge={coverage ? <CoverageBadge coverage={coverage} compact className="ml-1" /> : undefined}>
              <ProvenancePanel instrumentId={i.id} assetClass={i.asset_class} defaultOpen />
            </Section>
            <Section title="Recent events" href={`/events?instrument=${encodeURIComponent(i.id)}`} hint="canonical events touching this instrument">
              {events?.length ? (
                <ul className="rounded-md border border-rule bg-surface px-3">
                  {events.map((e) => (
                    <EventRow key={e.id} e={e} />
                  ))}
                </ul>
              ) : (
                <Empty>No canonical events for {i.symbol} yet. Events are derived from observed moves, halts, filings and source incidents.</Empty>
              )}
            </Section>
            {d.company?.cik && (
              <Section title="Regulatory filings" href={`/filings?cik=${d.company.cik}`} hint="SEC EDGAR · linked by CIK">
                {filings?.length ? (
                  <div className="overflow-x-auto rounded-md border border-rule bg-surface">
                    <table className="table-dense">
                      <thead>
                        <tr>
                          <th>Filed</th>
                          <th>Form</th>
                          <th>Filer</th>
                          <th>Document</th>
                        </tr>
                      </thead>
                      <tbody>
                        {filings.map((f) => (
                          <tr key={f.id}>
                            <td className="mono text-ink-2">{formatDateTime(f.filed_at, { tz: "America/New_York" })}</td>
                            <td className="mono font-medium">{f.form_type}</td>
                            <td>{f.company_name}</td>
                            <td>
                              <a href={f.url} target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">
                                EDGAR ↗
                              </a>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                ) : (
                  <Empty>No filings observed for CIK {d.company.cik} since Market Atlas started listening.</Empty>
                )}
              </Section>
            )}
          </div>
          <aside className="space-y-6">
            <div className="rounded-md border border-rule bg-surface p-4">
              <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Instrument</h3>
              <Kv
                cols={1}
                className="mt-2"
                items={[
                  ["Market Atlas id", i.id],
                  ["Class", ASSET_CLASS_LABEL[i.asset_class] ?? i.asset_class],
                  ["Security type", i.security_type?.replace(/_/g, " ").toLowerCase() ?? "—"],
                  ["Currency", i.currency ?? "—"],
                  ["Country", i.country ?? "—"],
                  ...(i.base ? ([["Base / quote", `${i.base} / ${i.quote ?? "—"}`]] as Array<[string, string]>) : []),
                  ["MIC", i.mic ?? "—"],
                ]}
              />
              {d.quote && (
                <div className="mt-3 flex flex-wrap gap-1.5">
                  <StatusBadge status={d.quote.data_status} />
                  <RightsBadge status={d.quote.rights_status} />
                </div>
              )}
            </div>
            {d.exchange && (
              <div className="rounded-md border border-rule bg-surface p-4">
                <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Venue</h3>
                <Link href={`/exchanges/${d.exchange.id}`} className="mt-1 block font-medium hover:underline">
                  {d.exchange.name}
                </Link>
                <div className="mt-1 flex items-center gap-2 text-sm text-ink-2">
                  <StatusBadge status={d.exchange.status.state} /> local {d.exchange.status.localTime} · {d.exchange.timezone}
                  {d.exchange.status.isHoliday && d.exchange.status.holidayName ? ` · ${d.exchange.status.holidayName}` : ""}
                </div>
                {d.exchange.status.nextTransition && (
                  <div className="mt-1 text-xs text-ink-3">
                    Next: {d.exchange.status.nextTransition.state.toLowerCase()} at {formatDateTime(d.exchange.status.nextTransition.at, { tz: d.exchange.timezone })}
                  </div>
                )}
              </div>
            )}
            {d.company && (
              <div className="rounded-md border border-rule bg-surface p-4">
                <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Company</h3>
                <div className="mt-1 font-medium">{d.company.name}</div>
                <Kv cols={1} className="mt-1" items={[["CIK", d.company.cik ?? "—"], ["Country", d.company.country ?? "—"], ["Sector", d.company.sector ?? "—"]]} />
                {d.company.cik && (
                  <a href={`https://www.sec.gov/cgi-bin/browse-edgar?action=getcompany&CIK=${d.company.cik}`} target="_blank" rel="noopener noreferrer" className="mt-2 inline-block text-xs text-accent hover:underline">
                    EDGAR company page ↗
                  </a>
                )}
              </div>
            )}
            <div className="rounded-md border border-rule bg-surface p-4">
              <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Observed by</h3>
              {coverage && <CoverageBadge coverage={coverage} className="mt-1.5" />}
              {d.sources.length ? (
                <ul className="mt-1 flex flex-wrap gap-1.5">
                  {d.sources.map((s) => (
                    <li key={s}>
                      <Link href={`/sources#${s}`} className="mono rounded border border-rule px-1.5 py-0.5 text-xs text-ink-2 hover:border-rule-strong">
                        {s}
                      </Link>
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="mt-1 text-xs text-ink-3">No source has published a value for this instrument in the current process yet.</p>
              )}
              {d.aliases.length > 0 && (
                <>
                  <h3 className="mt-3 text-[11px] font-medium uppercase tracking-wide text-ink-3">Aliases</h3>
                  <ul className="mt-1 flex flex-wrap gap-1.5">
                    {d.aliases.slice(0, 12).map((a) => (
                      <li key={`${a.alias}-${a.source_id}`} className="mono rounded bg-surface-2 px-1.5 py-0.5 text-xs text-ink-2" title={a.source_id ? `alias used by ${a.source_id}` : "global alias"}>
                        {a.alias}
                        {a.source_id ? <span className="text-ink-3"> · {a.source_id}</span> : null}
                      </li>
                    ))}
                  </ul>
                </>
              )}
            </div>
            {d.related.length > 0 && (
              <div className="rounded-md border border-rule bg-surface p-4">
                <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">Related instruments</h3>
                <ul className="mt-1 divide-y divide-rule text-sm">
                  {d.related.map((r) => (
                    <li key={r.id} className="flex items-center justify-between py-1.5">
                      <Link href={instrumentHref(r.id)} className="min-w-0 truncate hover:underline">
                        <span className="mono font-medium">{r.symbol}</span> <span className="text-xs text-ink-3">{r.name}</span>
                      </Link>
                      <span className="text-[10.5px] uppercase text-ink-3">{r.exchange_id ?? r.asset_class}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </aside>
        </div>
      </div>
    </div>
  );
}